<template>
	<d2-container>
		<template slot="header">
			<el-form class="header-area" ref="indexForm" :model="indexForm" label-width="100px" style="height: auto">
				<el-row>
                    <el-col :span="5">
					    <el-form-item label="订单渠道" prop="channelType">
						  <el-select v-model="indexForm.channelType" style="width: 100%;">
							<el-option label="全部" value=""></el-option>
							<el-option label="门店订单" value="1"></el-option>
							<el-option label="美团订单" value="2"></el-option>
							<el-option label="抖音订单" value="3"></el-option>
						  </el-select>
					    </el-form-item>
				    </el-col>
					<el-col :span="9">
						<el-form-item label="时间范围" prop="time">
							<el-date-picker
								v-model="indexForm.time"
								type="datetimerange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="timestamp"
								:default-time="['00:00:00', '23:59:59']"
								@change="chooseDay"
								style="width: 100%"
							></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<div class="search-submit">
							<el-button type="primary" size="medium" loading v-if="loading">查询</el-button>
							<el-button type="primary" size="medium" @click="submitForm('indexForm')" v-else>查询</el-button>

							<el-button type="primary" plain size="medium" @click="resetForm('indexForm')">重置</el-button>

							<el-button size="medium" @click="exportForm('indexForm')">导出</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</template>

		<template>
			<el-table stripe border :data="tableData" style="width: 100%">
				<el-table-column type="index" fixed label="排序" width="80"></el-table-column>
				<el-table-column prop="productCategoryName" label="菜品分类名称" width="120"></el-table-column>
				<el-table-column prop="salesQuantity" label="销量" width="200"></el-table-column>
				<el-table-column prop="productName" label="优惠金额(会员返现)"></el-table-column>
				<el-table-column prop="productName" label="应收金额"></el-table-column>
			</el-table>
		</template>
	</d2-container>
</template>
<script>
import { findProductSaleVolumeList } from '@api/restaurant/tempReport'
import dayjs from 'dayjs'
export default {
  name: 'tempReport-productSaleVolume',
  data () {
    return {
      indexForm: {
        channelType: '',
        time: [dayjs().startOf('month'), dayjs().endOf('month')]
      },

      startTime: dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
      endTime: dayjs().endOf('month').format('YYYY-MM-DD HH:mm:ss'),

      tableData: [],
	  loading: false
    }
  },

  mounted () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      if (this.loading) {
        return
      }
      this.loading = true
      findProductSaleVolumeList({
        channelType: this.indexForm.channelType,
        startTime: this.startTime,
        endTime: this.endTime
      })
        .then(res => {
          this.tableData = res.data
          this.loading = false
        })
        .catch(err => {
          console.log('err', err)
          this.loading = false
        })
    },

    chooseDay (val) {
	  this.startTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss')
	  this.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss')
    },
    submitForm (formName) {
      this.fetchData()
    },
    resetForm () {
      // this.$refs[formName].resetFields()
	  this.indexForm.channelType = ''
      this.indexForm.time = [dayjs().startOf('month'), dayjs().endOf('month')]
	  this.startTime = dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss')
	  this.endTime = dayjs().endOf('month').format('YYYY-MM-DD HH:mm:ss')

      this.fetchData()
    },
    exportForm () {
      this.loading = true
      findProductSaleVolumeList({
        channelType: this.indexForm.channelType,
        startTime: this.startTime,
        endTime: this.endTime
      }).then(res => {
        var blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
        var filename = res.headers.filename
        var downloadElement = document.createElement('a')
        var href = window.URL.createObjectURL(blob) // 创建下载的链接
        downloadElement.style.display = 'none'
        downloadElement.href = href
        downloadElement.download = filename // 下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() // 点击下载
        document.body.removeChild(downloadElement) // 下载完成移除元素
        window.URL.revokeObjectURL(href) // 释放掉blob对象
        this.loading = false
      }).catch(err => {
        console.log('err', err)
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
	// 样式请务必加scoped

</style>
